React Suspense Fallback Chain: 견고한 로딩 상태 계층 구조 구축

React Suspense는 React 16.6에 도입된 강력한 기능으로, 일반적으로 API에서 가져온 데이터인 종속성이 로드될 때까지 컴포넌트 렌더링을 "일시 중지"할 수 있습니다. 이를 통해 로딩 상태를 우아하게 관리하고 사용자 경험을 개선할 수 있으며, 특히 여러 데이터 종속성이 있는 복잡한 애플리케이션에서 유용합니다. 특히 유용한 패턴은 fallback chain으로, 데이터가 로드되는 동안 표시할 fallback 컴포넌트의 계층 구조를 정의합니다. 이 블로그 게시물에서는 React Suspense fallback chain의 개념을 살펴보고 구현을 위한 실용적인 예제와 모범 사례를 제공합니다.

React Suspense 이해하기

fallback chain에 대해 자세히 알아보기 전에 React Suspense의 핵심 개념을 간략하게 살펴보겠습니다.

React Suspense란 무엇인가요?

React Suspense는 컴포넌트가 렌더링되기 전에 "무언가"를 "기다릴" 수 있도록 하는 메커니즘입니다. 이 "무언가"는 일반적으로 비동기 데이터 가져오기이지만, 이미지 로딩 또는 코드 분할과 같은 다른 비동기 작업일 수도 있습니다. 컴포넌트가 일시 중지되면 React는 해당 컴포넌트가 기다리는 promise가 해결될 때까지 지정된 fallback UI를 렌더링합니다.

Suspense의 주요 구성 요소

• <Suspense>: 일시 중지된 컴포넌트의 경계를 정의하고 fallback UI를 지정하는 래퍼 컴포넌트입니다.
• fallback prop: 컴포넌트가 일시 중지되는 동안 표시할 UI입니다. 간단한 로딩 스피너부터 더 복잡한 플레이스홀더까지 모든 React 컴포넌트가 될 수 있습니다.
• 데이터 가져오기 라이브러리: Suspense는 react-query, swr과 같은 데이터 가져오기 라이브러리 또는 Fetch API 및 Promises를 직접 활용하여 데이터가 준비되었음을 알리는 라이브러리와 잘 작동합니다.

기본 Suspense 예제

다음은 React Suspense의 기본 사용법을 보여주는 간단한 예제입니다.

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded!');
    }, 2000);
  });
}

const resource = {
  data: null,
  read() {
    if (this.data) {
      return this.data;
    }
    throw fetchData().then(data => {
      this.data = data;
    });
  },
};

function MyComponent() {
  const data = resource.read();
  return <p>{data}</p>;
}

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}
      <MyComponent />
    </Suspense>
  );
}

export default App;

이 예제에서 MyComponent는 데이터가 아직 사용 가능하지 않을 때 promise를 throw하는 resource 객체(데이터 가져오기 작업을 시뮬레이션)를 사용합니다. <Suspense> 컴포넌트는 이 promise를 catch하고 promise가 해결되고 데이터가 사용 가능해질 때까지 "Loading..." fallback을 표시합니다. 이 기본 예제는 핵심 원칙을 강조합니다. React Suspense를 사용하면 컴포넌트가 데이터 로드를 기다리고 있음을 알리고 로딩 상태를 표시하는 깔끔한 방법을 제공합니다.

Fallback Chain 개념

fallback chain은 <Suspense> 컴포넌트의 계층 구조로, 각 수준은 점진적으로 더 자세하거나 세련된 로딩 상태를 제공합니다. 이는 UI의 다른 부분이 로딩 시간이 다르거나 종속성이 다를 수 있는 복잡한 사용자 인터페이스에 특히 유용합니다.

Fallback Chain을 사용하는 이유

• 향상된 사용자 경험: UI 요소가 사용 가능해짐에 따라 점진적으로 표시하여 더 부드럽고 유익한 로딩 경험을 제공합니다.
• 세분화된 제어: 애플리케이션의 다른 부분에 대한 로딩 상태를 세밀하게 제어할 수 있습니다.
• 인식된 지연 시간 감소: 초기의 간단한 로딩 상태를 빠르게 표시함으로써 전체 로딩 시간이 동일하더라도 사용자의 인식된 지연 시간을 줄일 수 있습니다.
• 오류 처리: 오류 경계와 결합하여 컴포넌트 트리의 여러 수준에서 오류를 우아하게 처리할 수 있습니다.

예제 시나리오: 전자 상거래 제품 페이지

다음과 같은 구성 요소가 있는 전자 상거래 제품 페이지를 고려해 보세요.

• 제품 이미지
• 제품 제목 및 설명
• 가격 및 가용성
• 고객 리뷰

이러한 각 구성 요소는 다른 API에서 데이터를 가져오거나 로딩 시간이 다를 수 있습니다. fallback chain을 사용하면 기본적인 제품 골격 레이아웃을 빠르게 표시한 다음 이미지, 세부 정보 및 리뷰가 사용 가능해짐에 따라 점진적으로 로드할 수 있습니다. 이는 빈 페이지나 단일 일반 로딩 스피너를 표시하는 것보다 훨씬 더 나은 사용자 경험을 제공합니다.

Fallback Chain 구현

React에서 fallback chain을 구현하는 방법은 다음과 같습니다.

import React, { Suspense } from 'react';

// 플레이스홀더 컴포넌트
const ProductImagePlaceholder = () => <div style={{ width: '200px', height: '200px', backgroundColor: '#eee' }}></div>;
const ProductDetailsPlaceholder = () => <div style={{ width: '300px', height: '50px', backgroundColor: '#eee' }}></div>;
const ReviewsPlaceholder = () => <div style={{ width: '400px', height: '100px', backgroundColor: '#eee' }}></div>;

// 데이터 가져오기 컴포넌트 (시뮬레이션)
const ProductImage = React.lazy(() => import('./ProductImage'));
const ProductDetails = React.lazy(() => import('./ProductDetails'));
const Reviews = React.lazy(() => import('./Reviews'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<ProductImagePlaceholder />}
        <ProductImage productId="123" />
      </Suspense>

      <Suspense fallback={<ProductDetailsPlaceholder />}
        <ProductDetails productId="123" />
      </Suspense>

      <Suspense fallback={<ReviewsPlaceholder />}
        <Reviews productId="123" />
      </Suspense>
    </div>
  );
}

export default ProductPage;

이 예제에서 각 컴포넌트(ProductImage, ProductDetails, Reviews)는 자체 <Suspense> 컴포넌트로 래핑됩니다. 이를 통해 각 컴포넌트는 해당 플레이스홀더를 로드하는 동안 표시하면서 독립적으로 로드할 수 있습니다. React.lazy 함수는 코드 분할에 사용되며, 이는 필요할 때만 컴포넌트를 로드하여 성능을 더욱 향상시킵니다. 이것은 기본적인 구현이며, 실제 시나리오에서는 플레이스홀더 컴포넌트를 더 시각적으로 매력적인 로딩 표시기(스켈레톤 로더, 스피너 등)로 바꾸고 시뮬레이션된 데이터 가져오기를 실제 API 호출로 대체할 것입니다.

설명:

1. React.lazy(): 이 함수는 코드 분할에 사용됩니다. 컴포넌트를 비동기적으로 로드할 수 있어 애플리케이션의 초기 로드 시간을 개선할 수 있습니다. React.lazy()로 래핑된 컴포넌트는 처음 렌더링될 때만 로드됩니다.
2. <Suspense> 래퍼: 각 데이터 가져오기 컴포넌트(ProductImage, ProductDetails, Reviews)는 <Suspense> 컴포넌트로 래핑됩니다. 이는 Suspense가 각 컴포넌트의 로딩 상태를 독립적으로 처리하도록 하는 데 중요합니다.
3. fallback props: 각 <Suspense> 컴포넌트에는 해당 컴포넌트가 로드되는 동안 표시할 UI를 지정하는 fallback prop이 있습니다. 이 예제에서는 간단한 플레이스홀더 컴포넌트(ProductImagePlaceholder, ProductDetailsPlaceholder, ReviewsPlaceholder)를 fallback으로 사용하고 있습니다.
4. 독립적 로딩: 각 컴포넌트가 자체 <Suspense> 컴포넌트로 래핑되어 있기 때문에 독립적으로 로드될 수 있습니다. 즉, ProductImage는 ProductDetails 또는 Reviews가 렌더링되는 것을 차단하지 않고 로드될 수 있습니다. 이는 더 점진적이고 반응적인 사용자 경험으로 이어집니다.

고급 Fallback Chain 기술

중첩된 Suspense 경계

<Suspense> 경계를 중첩하여 더 복잡한 로딩 상태 계층 구조를 만들 수 있습니다. 예:

import React, { Suspense } from 'react';

// 플레이스홀더 컴포넌트
const OuterPlaceholder = () => <div style={{ width: '500px', height: '300px', backgroundColor: '#f0f0f0' }}></div>;
const InnerPlaceholder = () => <div style={{ width: '200px', height: '100px', backgroundColor: '#e0e0e0' }}></div>;

// 데이터 가져오기 컴포넌트 (시뮬레이션)
const OuterComponent = React.lazy(() => import('./OuterComponent'));
const InnerComponent = React.lazy(() => import('./InnerComponent'));

function App() {
  return (
    <Suspense fallback={<OuterPlaceholder />}
      <OuterComponent>
        <Suspense fallback={<InnerPlaceholder />}
          <InnerComponent />
        </Suspense>
      </OuterComponent>
    </Suspense>
  );
}

export default App;

이 예제에서 InnerComponent는 OuterComponent 내부에 중첩된 <Suspense> 컴포넌트로 래핑되며, OuterComponent도 <Suspense> 컴포넌트로 래핑됩니다. 이는 OuterComponent가 로드되는 동안 OuterPlaceholder가 표시되고, InnerComponent가 로드되는 동안 (OuterComponent가 로드된 후) InnerPlaceholder가 표시된다는 것을 의미합니다. 이를 통해 전체 컴포넌트에 대한 일반 로딩 표시기와 하위 컴포넌트에 대한 더 구체적인 로딩 표시기를 표시할 수 있는 다단계 로딩 경험을 얻을 수 있습니다.

Suspense와 오류 경계 사용

React 오류 경계는 Suspense와 함께 사용하여 데이터 가져오기 또는 렌더링 중에 발생하는 오류를 처리할 수 있습니다. 오류 경계는 자식 컴포넌트 트리에서 JavaScript 오류를 catch하고 해당 오류를 기록하며 전체 컴포넌트 트리가 충돌하는 대신 fallback UI를 표시하는 컴포넌트입니다. 오류 경계와 Suspense를 결합하면 fallback chain의 여러 수준에서 오류를 우아하게 처리할 수 있습니다.

import React, { Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 fallback UI를 표시하도록 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류를 오류 보고 서비스에 기록할 수도 있습니다.
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 모든 사용자 지정 fallback UI를 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// 플레이스홀더 컴포넌트
const ProductImagePlaceholder = () => <div style={{ width: '200px', height: '200px', backgroundColor: '#eee' }}></div>;

// 데이터 가져오기 컴포넌트 (시뮬레이션)
const ProductImage = React.lazy(() => import('./ProductImage'));

function ProductPage() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<ProductImagePlaceholder />}
        <ProductImage productId="123" />
      </Suspense>
    </ErrorBoundary>
  );
}

export default ProductPage;

이 예제에서 <ProductImage> 컴포넌트와 그 <Suspense> 래퍼는 <ErrorBoundary>로 래핑됩니다. <ProductImage>의 렌더링 중 또는 그 안에서의 데이터 가져오기 중에 오류가 발생하면 <ErrorBoundary>는 오류를 catch하고 fallback UI(이 경우 간단한 "Something went wrong." 메시지)를 표시합니다. <ErrorBoundary>가 없으면 <ProductImage>의 오류가 전체 애플리케이션을 충돌시킬 수 있습니다. <ErrorBoundary>와 <Suspense>를 결합하면 로딩 상태와 오류 조건을 모두 우아하게 처리할 수 있는 더 견고하고 탄력적인 사용자 인터페이스를 만들 수 있습니다.

사용자 지정 Fallback 컴포넌트

간단한 로딩 스피너나 플레이스홀더 요소 대신 더 정교한 fallback 컴포넌트를 만들어 사용자 경험을 개선할 수 있습니다. 다음을 고려해 보세요.

• 스켈레톤 로더: 실제 콘텐츠의 레이아웃을 시뮬레이션하여 로드될 내용에 대한 시각적 표시를 제공합니다.
• 진행률 표시줄: 가능한 경우 데이터 로드 진행률을 표시합니다.
• 유익한 메시지: 무엇이 로드되고 있는지, 그리고 시간이 걸리는 이유에 대한 맥락을 제공합니다.

예를 들어 "Loading..."을 표시하는 대신 "Fetching product details..." 또는 "Loading customer reviews..."를 표시할 수 있습니다. 핵심은 사용자에게 관련 정보를 제공하여 기대치를 관리하는 것입니다.

React Suspense Fallback Chain 사용 모범 사례

• 기본 Fallback으로 시작: 빈 화면을 방지하기 위해 가능한 한 빨리 간단한 로딩 표시기를 표시합니다.
• Fallback 점진적 향상: 더 많은 정보가 사용 가능해짐에 따라 fallback UI를 업데이트하여 더 많은 컨텍스트를 제공합니다.
• 코드 분할 사용: Suspense와 React.lazy()를 결합하여 필요한 컴포넌트만 로드하여 초기 로드 시간을 개선합니다.
• 오류 우아하게 처리: 오류 경계를 사용하여 오류를 catch하고 유익한 오류 메시지를 표시합니다.
• 데이터 가져오기 최적화: 효율적인 데이터 가져오기 기술(예: 캐싱, 중복 제거)을 사용하여 로딩 시간을 최소화합니다. react-query 및 swr과 같은 라이브러리는 이러한 기술에 대한 기본 지원을 제공합니다.
• 성능 모니터링: React DevTools를 사용하여 Suspense 컴포넌트의 성능을 모니터링하고 잠재적 병목 현상을 식별합니다.
• 접근성 고려: fallback UI가 장애가 있는 사용자에게 접근 가능한지 확인합니다. 로딩 중인 콘텐츠를 나타내기 위해 적절한 ARIA 속성을 사용하고 로딩 표시기에 대한 대체 텍스트를 제공합니다.

로딩 상태에 대한 전역 고려 사항

전 세계 사용자를 위해 개발할 때는 로딩 상태와 관련된 다음 요소를 고려하는 것이 중요합니다.

• 다양한 네트워크 속도: 전 세계의 사용자는 네트워크 속도에 상당한 차이가 있을 수 있습니다. 로딩 상태는 느린 연결을 수용하도록 설계해야 합니다. 점진적 이미지 로딩 및 데이터 압축과 같은 기술을 사용하여 전송해야 하는 데이터 양을 줄이는 것을 고려하십시오.
• 시간대: 로딩 상태에서 시간 관련 정보(예: 예상 완료 시간)를 표시할 때 사용자의 시간대를 반드시 고려하십시오.
• 언어 및 현지화: 모든 로딩 메시지와 표시기가 다양한 언어 및 지역에 대해 올바르게 번역되고 현지화되었는지 확인하십시오.
• 문화적 민감성: 특정 사용자에게 불쾌하거나 문화적으로 민감할 수 있는 로딩 표시기나 메시지를 사용하지 않도록 하십시오. 예를 들어 특정 색상이나 기호는 다른 문화에서 다른 의미를 가질 수 있습니다.
• 접근성: 스크린 리더를 사용하여 로딩 상태가 장애가 있는 사람들에게 접근 가능한지 확인하십시오. 충분한 정보를 제공하고 ARIA 속성을 올바르게 사용하십시오.

실제 예제

React Suspense fallback chain을 사용하여 사용자 경험을 개선하는 방법에 대한 몇 가지 실제 예는 다음과 같습니다.

• 소셜 미디어 피드: 실제 콘텐츠가 로드되는 동안 게시물에 대한 기본 스켈레톤 레이아웃을 표시합니다.
• 대시보드: 각 위젯과 차트를 독립적으로 로드하고 로드되는 동안 각 위젯에 대한 플레이스홀더를 표시합니다.
• 이미지 갤러리: 고해상도 버전의 이미지가 로드되는 동안 저해상도 버전을 표시합니다.
• 전자 학습 플랫폼: 비디오, 텍스트 및 대화형 요소에 대한 플레이스홀더를 표시하여 강의 콘텐츠와 퀴즈를 점진적으로 로드합니다.

결론

React Suspense fallback chain은 애플리케이션에서 로딩 상태를 관리하는 강력하고 유연한 방법을 제공합니다. fallback 컴포넌트의 계층 구조를 만듦으로써 더 부드럽고 유익한 사용자 경험을 제공하여 인식된 지연 시간을 줄이고 전반적인 참여도를 향상시킬 수 있습니다. 이 블로그 게시물에 설명된 모범 사례를 따르고 전역 요소를 고려하면 다양한 사용자에게 적합한 견고하고 사용자 친화적인 애플리케이션을 만들 수 있습니다. React Suspense의 힘을 활용하고 애플리케이션의 로딩 상태에 대한 제어 수준을 한 단계 높이십시오.

Suspense와 잘 정의된 fallback chain을 전략적으로 사용함으로써 개발자는 사용자 경험을 크게 향상시켜 복잡한 데이터 종속성 및 다양한 네트워크 조건에서도 더 빠르고 반응성이 뛰어나며 사용자 친화적인 애플리케이션을 만들 수 있습니다.